<style lang="less">
  @import "./userManager.less";
</style>
<template>
  <Card>
    <Row>
      <Form :label-width="55" inline ref="searchForm" :model="searchForm" >
        <Form-item label="用户名" prop="username">
          <Input type="text" clearable placeholder="请输入用户名" v-model="searchForm.username"/>
        </Form-item>
        <Form-item label="手机号" prop="mobile">
          <Input type="text" clearable placeholder="请输入手机号" v-model="searchForm.mobile"/>
        </Form-item>
        <Form-item label="状态" prop="status">
          <Select placeholder="请选择" style="width:180px" >
            <Option value="-1" >请选择</Option>
            <Option value="0" >禁用</Option>
            <Option value="1" >正常</Option>
          </Select>
        </Form-item>
        <Form-item label="邮箱" prop="email">
          <Input type="text" clearable placeholder="请输入邮箱" v-model="searchForm.email"/>
        </Form-item>
        <Form-item style="margin-left:-35px;">
          <Button @click="handleSearch" type="primary" icon="md-search" class="btnMargLeft">搜索</Button>
          <Button @click="handleReset" class="btnMargLeft">重置</Button>
          <Button @click="addSysUser" class="btnMargLeft" type="primary">添加用户</Button>
        </Form-item>
      </Form>
      <Modal v-model="addSysUserShow" width="350" title="添加用户" @on-ok="submitAddModelFrom('addSysUserFrom')" :mask-closable="false">
        <div>
          <Form :label-width="70" inline ref="addSysUserFrom" :model="addSysUserFrom" :rules="addSysUserRules">
            <Form-item label="用户名" prop="username">
              <Input type="text" clearable placeholder="请输入用户名" v-model="addSysUserFrom.username"/>
            </Form-item>
            <Form-item label="密码" prop="password">
              <Input type="text" clearable placeholder="请输入密码" v-model="addSysUserFrom.password"/>
            </Form-item>
            <Form-item label="邮箱" prop="email">
              <Input type="text" clearable placeholder="请输入密码" v-model="addSysUserFrom.email"/>
            </Form-item>
            <Form-item label="手机号" prop="mobile">
              <Input type="text" clearable placeholder="请输入密码" v-model="addSysUserFrom.mobile"/>
            </Form-item>
          </Form>
        </div>
      </Modal>
    </Row>
    <br>
    <Row>
      <Alert show-icon>
        已选择 <span class="select-count">{{selectCount}}</span> 项
        <a class="select-clear" @click="clearSelectAll">清空</a>
      </Alert>
      <Button icon="md-trash" class="btnMargLeft" @click="delAll">批量删除</Button>
    </Row>
    <br>
    <Row>
      <Table border :columns="columns12" :data="userData" @on-selection-change="showSelect">
        <template slot-scope="{ row }" slot="name">
          <strong>{{ row.name }}</strong>
        </template>
        <template slot-scope="{ row, index }" slot="action">
          <Button type="primary" size="small" class="btnMargLeft" @click="showShopDetail(row.userId)">查看店铺</Button>
              <Modal v-model="showShopDetailVisible">
                <div v-if="selectShopDetail===null">
                  <Tabs>
                    <TabPane label="店铺详情" name="name1">
                      该用户暂未开通店铺<br/>
                      <router-link :to="{path:'shopDetailManager',query:{userId:row.userId}}" >>>点击开通</router-link>
                    </TabPane>
                  </Tabs>
            </div>
            <Tabs value="name1" v-else>
              <TabPane label="店铺详情" name="name1">
                <div>
                  店铺名称: {{selectShopDetail.shopName}}<br/>
                  店铺简介: {{selectShopDetail.intro}}<br/>
                  店铺公告: {{selectShopDetail.shopNotice}}<br/>
                  店铺行业: {{selectShopDetail.shopIndustry}}<br/>
                  每天营业时间段: {{selectShopDetail.openTime}}<br/>
                  店铺状态: {{selectShopDetail.openTime}}<br/>
                  分销开关: {{selectShopDetail.isDistribution}}<br/>
                </div>
              </TabPane>
              <TabPane label="店铺成员" name="name2">
                <div>
                  店长: {{selectShopDetail.shopOwner}}<br/>
                  店铺绑定的手机: {{selectShopDetail.mobile}}<br/>
                  店铺联系电话: {{selectShopDetail.tel}}<br/>
                </div>
              </TabPane>
              <TabPane label="店铺所在" name="name3">
                所在纬度: {{selectShopDetail.shopLat}}<br/>
                所在经度: {{selectShopDetail.shopLng}}<br/>
                详细地址: {{selectShopDetail.shopAddress}}<br/>
                所在省份: {{selectShopDetail.province}}<br/>
                所在城市: {{selectShopDetail.city}}<br/>
                所在区域: {{selectShopDetail.area}}<br/>
                店铺省市区代码: {{selectShopDetail.pcaCode}}<br/>
              </TabPane>
              <TabPane label="店铺图片" name="name4">
                <div v-if="shopPhotos.length>0">
                  <P>原有图片</P>
                  <div class="upload-picture">
                    <div class="upload-list"  v-for="(item, index) in shopPhotos" :key="index">
                      <img :src="item" >
                      <div class="upload-list-cover">
                        <Icon type="ios-eye-outline" @click.native="handleView(item)"></Icon>
                        <Icon type="ios-trash-outline" @click.native="removeProductImage(item,'punchInfo',index)"></Icon>
                      </div>
                    </div>
                  </div>
                </div>
              </TabPane>
            </Tabs>
          </Modal>
          <Button type="error" size="small" @click="remove(index)" class="btnMargLeft">删除</Button>
          <Button type="error" size="small" @click="remove(index)" class="btnMargLeft">启用</Button>
        </template>
      </Table>
    </Row>
    <Modal title="图片预览" v-model="visible">
      <img :src="imgName" v-if="visible" style="width: 100%">
    </Modal>
  </Card>
</template>
<script>
import UploadPictureClip from '_c/UploadPictureClip/UploadPictureClip'
import UploadPicture from '_c/UploadPicture/UploadPicture'
export default {
  name: 'userManager',
  components: {
    UploadPicture,
    UploadPictureClip
  },
  data () {
    const validateUsernameAdd = (rule, value, callback) => {
      if (value.length < 6) {
        callback(new Error('用户名长度不能小于6！'))
      } else if (!/^([a-z0-9A-Z\u4E00-\u9FA5]*)$/.test(value)) {
        callback(new Error('用户名不规范！'))
      }
      callback()
    }
    return {
      visible: false,
      imgName: '',
      uploadMaxSize: 1024 * 10 * 20, // 20M
      shopPhotos: [],
      selectShopDetail: {
        shopId: 0,
        shopName: '',
        shopType: 0,
        intro: '',
        shopNotice: '',
        shopIndustry: '',
        shopOwner: '',
        mobile: '',
        tel: '',
        shopLat: '',
        shopLng: '',
        shopAddress: '',
        province: '',
        city: '',
        area: '',
        pcaCode: '',
        shopLogo: '',
        shopPhotos: '',
        openTime: '',
        shopStatus: '',
        transportType: '',
        fixedFreight: '',
        fullFreeShipping: '',
        createTime: '',
        updateTime: '',
        isDistribution: ''
      },
      showShopDetailVisible: false,
      selectList: 0,
      selectCount: 0,
      showProduct: false,
      addSysUserShow: false,
      searchForm: {
        username: '',
        email: '',
        mobile: '',
        status: ''
      },
      addSysUserRules: {
        username: [
          { required: true, message: '用户名不能为空！', trigger: 'blur' },
          { validator: validateUsernameAdd, trigger: 'blur' }
        ]
      },
      addSysUserFrom: {
        username: '',
        email: '',
        password: '',
        mobile: ''
      },
      columns12: [
        {
          width: 60,
          type: 'selection',
          key: 'shopId'
        },
        {
          title: '用户名',
          key: 'username'
        },
        {
          title: '邮箱',
          key: 'email'
        },
        {
          title: '手机号',
          key: 'mobile'
        },
        {
          title: '状态',
          key: 'status',
          render: (h, params) => {
            if (params.row.status === 0) {
              return h('div', '禁用')
            } else if (params.row.status === 1) {
              return h('div', '启用')
            } else {
              return h('div', '启用')
            }
          }
        },
        {
          title: '操作',
          width: 230,
          slot: 'action'
        }
      ],
      userData: []
    }
  },
  methods: {
    selectProduct () {
      this.showProduct = true
    },
    init () {
      this.getSysUserDetails()
    },
    getSysUserDetails () {
      this.$api.sysUser.getConditionUserDetail().then(res => {
        console.log(res)
        this.userData = res.data.data
      }).catch(err => console.log(err))
    },
    submitAddModelFrom (name) {
      this.$refs[name].validate((valid) => { // 如果你的正则表达式通过
        if (valid) {
          let data = new FormData()
          data.append('username', this.addSysUserFrom.username)
          data.append('password', this.addSysUserFrom.password)
          data.append('email', this.addSysUserFrom.email)
          data.append('mobile', this.addSysUserFrom.mobile)
          this.$Spin.show()
          this.$api.sysUser.addSysUser(data).then(res => {
            if (res.data.data === true) {
              this.$Message.success('添加成功！')
            }
            this.$Spin.hide()
          }).catch(err => {
            console.log(err)
            this.$Spin.hide()
          })
        }
      })
      this.init()
    },
    handleSearch () {

    },
    handleReset () {

    },
    showShopDetail (userId) {
      // 先查询数据 没有就提示没有以及不弹窗
      this.$api.shopDetail.getByShopDetail({ id: userId }).then(res => {
        console.log(res)
        if (res.data.data === null) {
          this.selectShopDetail = null
          return
        }
        this.selectShopDetail = res.data.data.tzShopDetail
        var imgs = []
        var host = this.$imgHost
        res.data.data.shopPhotos.forEach(function (e, i) {
          imgs[i] = host + e
        })
        this.shopPhotos = imgs
      }).catch(err => {
        console.log(err)
      })
      this.showShopDetailVisible = true
    },
    addSysUser () {
      this.addSysUserShow = true
    },
    clearSelectAll () {

    },
    showSelect (e) {
      this.selectList = e
      this.selectCount = e.length
    },
    handleView (name) {
      this.imgName = name
      this.visible = true
    },
    removeProductImage (picData, arrName, index) { // 传递过来图片对象 那个数组的图片  以及删除的索引 删除并不是真正删除
      // this.deletePicDataIds.push(picData)
      // if (arrName === 'print') {
      //   this.showPrintImgList.splice(index, 1)
      // } else {
      //   this.showPunchInfoImgList.splice(index, 1)
      // }
    },
    handleRemove (data) {
      if (data.id > 0) {
        this.delImages = this.delImages.concat(data)
      }
    },
    delAll () {
      if (this.selectCount <= 0) {
        this.$Message.warning('您还未选择要删除的数据')
        return
      }
      this.$Modal.confirm({
        title: '确认删除',
        content: '您确认要删除所选的 ' + this.selectCount + ' 条数据?',
        onOk: () => {
          // let productIds = []
          // this.selectList.forEach(function (e, i) {
          //   productIds[i] = e.id
          // })
          // this.$api.product.batchMarkDeleteProduct({ productIds: productIds }).then(res => {
          //   if (res.code === 200) {
          //     this.$Message.success('删除成功')
          //     this.searchForm.current = 1
          //     this.clearSelectAll()
          //     this.init()
          //   }
          // })
        }
      })
    }
  },
  mounted () {
    this.init()
    // this.$api.category.getCategoryListById({ moduleId: 1 }).then(res => {
    //   this.cagtegoryList = res.data
    // })
  }
}
</script>

<style scoped>

</style>
